<template>
  <view class="delivery-man-info">
      <view class="user-info-wrap">
        <view class="left">
          <image :src='ftp + info.avatar' />
        </view>

        <view class="right-info">
          <view class="name">
            <view class="text">
              {{info.username || '徐智强'}}
            </view>
            <view class="tag">
              <uni-tag
                text="快递员"
                type="primary"
                size="small"
              ></uni-tag>

            </view>
          </view>
          <view class="address">完成{{info.order_num || 198}}单</view>
        </view>
      </view>
    <view class="bottom-option">
      <view
          class="opt"
          @click.stop="handleCall"
      >
        <uni-icons
          type="phone-filled"
          size="18"
          color="#BFBFC1"
        ></uni-icons>
        <view class="text">呼叫</view>
      </view>
      <view
          class="opt"
          @click.stop="handleToChat"
      >
        <uni-icons
          type="chatbubble-filled"
          size="18"
          color="#BFBFC1"
        ></uni-icons>
        <view class="text">消息</view>
      </view>
      <view
          class="opt"
          @click.stop="handleToLocationTracking"
      >
        <uni-icons
          type="paperplane-filled"
          size="18"
          color="#BFBFC1"
        ></uni-icons>
        <view class="text">位置</view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp()
export default {
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      ftp: app.globalData.ftp
    }
  },
  methods: {
    handleCall() {
      const {
        mobile
      } = this.info

      uni.makePhoneCall({
        phoneNumber: mobile //仅
      });
    },
    handleToLocationTracking() {
      const that = this

      if (app.globalData.latitude && app.globalData.longitude) {
        that.latitude = app.globalData.latitude
        that.longitude = app.globalData.longitude
        that.handleToLine()
      } else {
        uni.getLocation({
          success(res) {
            const {
              latitude,
              longitude
            } = res

            that.latitude = latitude
            that.longitude = longitude
            that.handleToLine()
          },
          fail(res) {}
        })
      }
    },

    handleToLine() {
      const {
        info,
        latitude,
        longitude
      } = this
      const {
        id
      } = info

      app.request({
        express_id: id,// latitude
      }, '/api/logistics/terminal/get_express').then((res) => {
        const {
          code,
          data
        } = res

        if (code === 1) {
          let line = {
            slatitude: latitude,
            slongitude: longitude,
            elatitude: data.lat,
            elongitude: data.lnt
          }
          let str = app.getQueryStringByObject(line)

          uni.navigateTo({
            url: '/pages/kdOrder/locationTracking' + str
          })
        }
      })
    },

    handleToChat() {
      uni.navigateTo({
        url: '/pages/myFeature/chat/index'
      })
    }
  }
}
</script>

<style scoped lang="less">
.delivery-man-info {
  border-top: 1px solid #F3F2F7;
  padding-top: 20rpx;
  box-sizing: border-box;

  .user-info-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 20rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    .left {
      width: 72rpx;
      height: 72rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      margin-right: 20rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .right-info {
      height: 72rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        margin-bottom: 4rpx;
        .text {
          margin-right: 8rpx;
        }
      }
      .tag {
        margin: 0 2px 2rpx;
      }
      .address {
        font-size: 24rpx;
        color: #c0c0c0;
      }
    }
  }

  .bottom-option {
    display: flex;
    width: 100%;
    height: 62rpx;
    border-top: 1px solid #F3F2F7;
    .opt {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .text {
        font-size: 24rpx;
        color: #B2B2B2;
        margin-left: 4rpx;
      }
    }
  }
}

</style>
